<template>
  <div class="container">
    <Header/>
    <keep-alive v-if="this.$route.meta.keepAlive">
      <RouterView/>
    </keep-alive>
    <RouterView  v-else />
    <footer class="footter">
        <footer-tabbar />
    </footer>
  </div>
</template>

<script>
import { Button, Tabbar, TabbarItem, Swipe, SwipeItem, Popup } from 'vant'
import { mapActions, mapMutations, mapState } from 'vuex' // createNamespacedHelpers
import Header from '@/components/header'

import FooterTabbar from 'components/FooterTabbar'
// const { mapActions } = createNamespacedHelpers('test') // 可使用这种方式直接获得test模板

export default {
  name: 'home',
  data () {
    return {
      value: 1,
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ],
      iconList: [
        'dashboard',
        'example',
        'eye-open',
        'eye',
        'form',
        'link',
        'nested',
        'password',
        'table',
        'tree',
        'user',
        '404'
      ],
      show: false,
      test: 2,
    }
  },
  components: {
    [Button.name]: Button,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Popup.name]: Popup,
    FooterTabbar,
    Header,

  },
  computed: {
    ...mapState({
      loading: state => state['@@loading'].effects['test/onePlusAsync']
    })
  },
  created() {
      console.log('页面加载完之前调用' + this.test);
  },
  mounted() {
        console.log('页面加载完之后调用' + this.test);

        setTimeout(() => {
          this.test = 6
          console.log(this.test);
        }, 3000)
  },
  watch: {
  test: function () {
      console.log('watch' + this.test);
  }
  },
  methods: {
    add () {
      this.onePlusAsync(this.value)
    },
    addOne () {
      this.show = true
      this.onePlus(1)
    },
    ppp() {

    },
    // ...mapActions('home', ['initData', 'plusPage', 'initPage']),
    ...mapActions({
      onePlusAsync: 'test/onePlusAsync'
    }),
    ...mapMutations({
      onePlus: 'test/onePlus',
      logout: 'user/LOGOUT'
    })
  }
}
</script>
<style lang="scss" scoped >
@media screen and (max-width: 780px) {

}
.container{
  position: absolute;
  height:100%;
  width: 100%;

  .footter{
    width: 100%;
        height: 20px;
    //     background: #5b6d81;
        line-height: 20px;
        text-align: center;
        /* 方法一 */
        position: fixed;
        bottom: 0;

  }

}
</style>
